<template>
  <div class="pull" :class="[ispullup?'pullup':'pulluptop']" @click="toTop"></div>
</template>

<script>
export default {
  props: {
    ispullup: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toTop () {
      let top = document.documentElement.scrollTop || document.body.scrollTop
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    },
  },
}
</script>

<style lang="scss" scoped>
.pull {
  position: fixed;
  right: 5rem;
  opacity: 1;
  z-index: 99;
  width: 70px;
  height: 100%;
  background: url(../../assets/images/pullup.png) no-repeat center;
  background-size: contain;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  animation: floattransition 3s linear infinite;
}
.pullup {
  top: -6rem;
}

.pulluptop {
  top: -100%;
}

// 定义个上下浮动的动画
@keyframes floattransition {
  0% {
    transform: translateY(0.5rem);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateY(0.5rem);
  }
}
</style>